<template>
  <div class="login-container">
    <div class="operation">
      <div>
        <el-button
          type="primary"
          plain
          icon="el-icon-circle-plus-outline"
          @click="handleClick"
        >增加</el-button>
        <el-button
          type="success"
          plain
          icon="el-icon-setting"
          @click="edit"
        >编辑</el-button>

        <el-button
          type="warning"
          plain
          icon="el-icon-delete"
        >删除</el-button>
      </div>

    </div>
    <div class="box">
      <el-row>
        <el-col :span="2">
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入菜单名称名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <el-tree
            ref="tree"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="id"
            :default-expanded-keys="[414]"
            @node-click="handleNodeClick"
          />
        </el-col>
        <el-col :span="22">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="date"
              label="菜单编号"

              align="center"
            />
            <el-table-column
              prop="name"
              label="菜单名称"

              align="center"
            />
            <el-table-column
              prop="address"
              label="菜单URL"
              align="center"
            />
            <el-table-column
              prop="address"
              label="排序"
              align="center"
            />
            <!-- <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center"
            >
              <template slot-scope="scope">

              </template>
            </el-table-column> -->
          </el-table>
        </el-col>
      </el-row>
    </div>
    <!-- 增加弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="header-title">
        <div
          style="
            padding: 15px 20px;
            color: #fff;
            text-align: center;
            font-weight: bold;
          "
        >
          添加菜单信息
        </div>
        <div
          class="closeing"
          @click="CloseOne"
        >
          <i class="el-icon-close iconc" />
        </div>
      </div>
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="上级菜单"
            prop="region"
          >
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择菜单"
            >
              <el-option
                label="区域一"
                value="shanghai"
              />
              <el-option
                label="区域二"
                value="beijing"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="菜单名称"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item
            label="菜单URL"
            prop="name"
          >
            <el-input />
          </el-form-item>
          <el-form-item
            label="菜单图表"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item
            label="排序编号"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="success"
          @click="confirm"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog
      :visible.sync="dialogVisiblebianji"
      width="30%"
    >
      <div class="header-title">
        <div
          style="
            padding: 15px 20px;
            color: #fff;
            text-align: center;
            font-weight: bold;
          "
        >
          修改菜单信息
        </div>
        <div
          class="closeing"
          @click="CloseOne"
        >
          <i class="el-icon-close iconc" />
        </div>
      </div>
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="上级菜单"
            prop="region"
          >
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择菜单"
            >
              <el-option
                label="区域一"
                value="shanghai"
              />
              <el-option
                label="区域二"
                value="beijing"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="菜单名称"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item
            label="菜单URL"
            prop="name"
          >
            <el-input />
          </el-form-item>
          <el-form-item
            label="菜单图表"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item
            label="排序编号"
            prop="name"
          >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="success"
          @click="confirm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 结构树
      deptOptions: [
        {
          id: 414,
          label: '河南省',
          children: [
            {
              id: 41401,
              label: '郑州',
              children: [
                {
                  id: 4140100,
                  label: '城东供电部',
                  children: [
                    { id: 414010001, label: '城东直供' },
                    { id: 414010002, label: '城东用电服务四班（二马路）' },
                    { id: 414010003, label: '城东用电服务二班（郑汴路）' },
                    { id: 414010004, label: '城东用电服务一班（优胜路）' },
                    { id: 414010005, label: '城东供电所' },
                    { id: 414010006, label: '城东用电服务三班（南阳路）' }
                  ]
                },
                {
                  id: 4140101,
                  label: '城西供电部',
                  children: [
                    { id: 414010101, label: '城西用电服务一班(嵩山)' },
                    { id: 414010102, label: '城西用电服务二班(中原)' },
                    { id: 414010103, label: '城西用电服务三班(牛砦)' },
                    { id: 414010104, label: '城西用电服务四班(工人)' }
                  ]
                },
                {
                  id: 4140102,
                  label: '郑东新区供电部',
                  children: [
                    { id: 414010201, label: '郑东祭城供电所' },
                    { id: 414010202, label: '郑东圃田供电所' },
                    { id: 414010203, label: '郑东姚桥供电所' },
                    { id: 414010204, label: '郑东白沙供电所' }
                  ]
                },
                {
                  id: 4140103,
                  label: '国网郑州供电公司城北供电部',
                  children: [{ id: 414010301, label: '城北直供所' }]
                },
                { id: 4140106, label: '经开区供电部' },
                { id: 4140121, label: '登封' }
              ]
            },

            {
              id: 41417,
              label: '周口',
              children: [
                {
                  id: 4141721,
                  label: '郸城',
                  children: [
                    { id: 414172101, label: '洺南供电中心' },
                    { id: 414172102, label: '洺北供电中心' },
                    { id: 414172103, label: '城郊所' }
                  ]
                },
                {
                  id: 4141722,
                  label: '扶沟',
                  children: [
                    { id: 414172201, label: '崔桥所' },
                    { id: 414172202, label: '江村所' }
                  ]
                },
                {
                  id: 4141723,
                  label: '淮阳',
                  children: [
                    { id: 414172303, label: '王店' },
                    { id: 414172304, label: '郑集' }
                  ]
                },
                {
                  id: 4141724,
                  label: '鹿邑',
                  children: [
                    { id: 414172401, label: '真源供电中心' },
                    { id: 414172403, label: '郑集' }
                  ]
                },
                {
                  id: 4141725,
                  label: '沈丘',
                  children: [
                    { id: 414172502, label: '刘湾' },
                    { id: 414172506, label: '北扬集' }
                  ]
                },
                {
                  id: 4141726,
                  label: '项城',
                  children: [
                    { id: 414172601, label: '南顿' },
                    { id: 414172602, label: '永丰' }
                  ]
                },
                {
                  id: 4141727,
                  label: '商水',
                  children: [{ id: 414172701, label: '市场营销部' }]
                },
                {
                  id: 4141728,
                  label: '太康',
                  children: [{ id: 414172801, label: '板桥' }]
                },
                {
                  id: 4141729,
                  label: '西华',
                  children: [{ id: 414172901, label: '城关所' }]
                },
                {
                  id: 4141730,
                  label: '泛区',
                  children: [
                    { id: 414173003, label: '场部供电中心' },
                    { id: 414173005, label: '五所' }
                  ]
                }
              ]
            },
            {
              id: 41418,
              label: '济源',
              children: [
                {
                  id: 4141803,
                  label: '郊区供电中心',
                  children: [
                    { id: 414180301, label: '轵城' },
                    { id: 414180302, label: '大峪' },
                    { id: 414180303, label: '五龙口' },
                    { id: 414180304, label: '克井' },
                    { id: 414180305, label: '王屋' }
                  ]
                }
              ]
            }
          ]
        }
      ],
      tableData: [
        {
          date: '----',
          name: '----',
          address: '----'
        },
        {
          date: '----',
          name: '----',
          address: '----'
        },
        {
          date: '----',
          name: '----',
          address: '----'
        }
      ],
      deptName: undefined,
      dialogVisible: false,
      dialogVisiblebianji: false,
      multipleSelection: null,
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
          //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [{ required: true, message: '请选择菜单', trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {},
  mounted() {},
  methods: {
    //   编辑按钮点击事件
    edit() {
      this.dialogVisiblebianji = true
    },
    //   增加弹出框确认事件
    confirm() {
      this.dialogVisible = false
    },
    //   弹出框关闭事件
    CloseOne() {
      this.dialogVisible = false
      this.dialogVisiblebianji = false
    },
    //   增加按钮点击
    handleClick(row) {
      this.dialogVisible = true
    },
    //   表格斑马线颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'warning-row'
      } else if (rowIndex % 2 == 1) {
        return 'success-row'
      }
      return ''
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // tree筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 树形节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  margin-top: 50px;
}
.g-purple {
  border: 1px solid #064657;
}
.operation {
  display: flex;
  margin: 0 0 10px 0px;
  height: 50px;
  box-shadow: 3px 0px 3px #01726e;
  padding: 5px 0 0 20px;
  div {
    height: 40px;
  }
}
.closeing:hover {
  background-color: #006f6b !important;
}
.closeing {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background-color: #27bdb0;
  position: absolute;
  top: 0px;
  right: -32px;
  opacity: 1;
  .iconc {
    color: #000000;
    display: block;
    width: 30px;
    height: 30px;
    font-size: 20px;
    opacity: 1;
    line-height: 30px;
    text-align: center;
  }
}
.header-title {
  position: absolute;
  width: 100%;
  height: 45px;
  left: 0;
  top: 0;
  background-color: #27bdb0;
}
</style>
<style>
/* 表格斑马线颜色设置 */
.el-table .warning-row {
  background: #f3fdfc;
}

.el-table .success-row {
  background: #fff;
}
</style>

